<template>
  <div class="todos">
    <div class="header">
      <h3>TASK OA任务管理系统</h3>
      <el-button
        type="primary"
        @click="() => this.setNewTaskDialogVisible(true)"
        >新增任务</el-button
      >
    </div>
    <div class="tags">
      <el-tag
        v-for="status in tasksStatus"
        :key="status.value"
        :type="currentFilter === status.value ? 'primary' : 'info'"
        style="cursor: pointer"
        @click="setFilter(status.value)"
      >
        {{ status.label }}
      </el-tag>
    </div>
    <el-table style="width: 100%" :data="filteredTasks" v-loading="loading">
      <el-table-column label="编号" width="80" prop="id"></el-table-column>
      <el-table-column
        label="任务描述"
        width="180"
        prop="description"
      ></el-table-column>
      <el-table-column label="状态" width="80" prop="status">
        <template #default="slotProps">
          {{ slotProps.row.status === 1 ? "未完成" : "已完成" }}
        </template>
      </el-table-column>
      <el-table-column
        label="预计完成时间"
        prop="expected_completion_time"
      ></el-table-column>
      <el-table-column
        label="实际完成时间"
        prop="actual_completion_time"
      ></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row: { id } }">
          <el-popconfirm
            title="请问你确定要删除吗?"
            @confirm="() => handleDelete(id)"
          >
            <el-link slot="reference" type="danger">删除</el-link>
          </el-popconfirm>
          <el-popconfirm
            title="请问你确定要完成吗?"
            @confirm="() => handleComplete(id)"
          >
            <el-link slot="reference" type="success">完成</el-link>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="新增任务"
      width="50%"
      :visible="newTaskDialogVisible"
      :show-close="false"
    >
      <el-form :model="taskForm" :rules="taskRules" ref="newTaskForm">
        <el-form-item label="任务描述" prop="description">
          <el-input
            type="textarea"
            :row="5"
            v-model="taskForm.description"
          ></el-input>
        </el-form-item>
        <el-form-item label="预计完成时间" prop="expected_completion_time">
          <el-date-picker
            type="datetime"
            placeholder="请选择日期时间"
            v-model="taskForm.expected_completion_time"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button
          type="primary"
          @click="handleNewTaskConfirm"
          >确认</el-button
        >
        <el-button type="default" @click="() => setNewTaskDialogVisible(false)"
          >取消</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";

export default {
  name: "HomeView",
  data() {
    return {
      tasksStatus: [
        { label: "全部", value: "all" },
        { label: "未完成", value: 1 },
        { label: "已完成", value: 2 },
      ],
      taskForm: {
        //新建任务的表单对象
        description: "", //任务描述
        expected_completion_time: "", //预计完成时间
      },
      taskRules: {
        description: [
          { required: true, message: "请输入任务描述", trigger: "blur" },
          {
            min: 1,
            max: 200,
            message: "长度必须在1到200之间",
            trigger: "blur",
          },
        ],
        expected_completion_time: [
          { required: true, message: "请输入预计完成时间", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.retrieveTasks();
  },
  methods: {
    //把Vuex仓库中的setFilter这个mutation映射为当前组件方法
    ...mapMutations("task", ["setFilter", "setNewTaskDialogVisible"]),
    ...mapActions("task", [
      "retrieveTasks",
      "handleDelete",
      "handleComplete",
      "handleNewTask",
    ]),
    async handleNewTaskConfirm() {
      //获取表单的实例，进行表单验证，如果验证通过，打印表单对象，如果没通过，则提示错误
      this.$refs.newTaskForm.validate(async (valid) => {
        if (valid) {
          const { description, expected_completion_time } = this.taskForm;
          const formatted_expected_completion_time =
            expected_completion_time.toLocaleString("zh-CN", { hour12: false });
          try {
            await this.handleNewTask({description,formatted_expected_completion_time});
            this.taskForm.description = "";
            this.taskForm.expected_completion_time = "";
            this.$message.success("任务创建成功");
          } catch (error) {
            this.$message({
              type: "error",
              message: error.message,
            });
          }
        } else {
          this.$message({
            type: "error",
            message: "表单验证失败",
          });
        }
      });
    },
  },
  computed: {
    //把Vuex仓库状态对象中的loading属性和currentFilter属性映射当前组件的计算属性中
    ...mapState("task", ["loading", "currentFilter", "newTaskDialogVisible"]),
    //把Vuex仓库中getters中的filteredTasks属性映射到当前组件的计属性中
    ...mapGetters("task", ["filteredTasks"]),
  },
};
</script>
<style lang="less" scoped>
.todos {
  width: 800px;
  margin: 0px auto;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
  .tags {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px;
    span {
      margin: 10px;
    }
  }
  ::v-deep(.el-dialog__header) {
    text-align: left;
  }
  ::v-deep(.el-form-item__content) {
    text-align: left;
  }
  ::v-deep(.el-link--inner) {
    margin-left: 10px;
  }
}
</style>
